<template>
  <div  class="box">
  <!-- 燃烧数字化检查 -->
  <div class="mainDiv shouye">
    <div class="r">
      <div class="stage_c_r main_2" style="width: calc(100% - 8px)">
        <div class="t">
          <div class="react">
            <i class="l_up"></i>
            <i class="l_down"></i>
            <i class="r_up"></i>
            <i class="r_down"></i>
            <div class="title">
              <div class="title_r"><span>燃烧数字化监测</span></div>
              <div class="title_zuo">
                <i class="l_up zuo_up"></i>
                <i class="l_down zuo_up"></i>
                <i class="r_up zuo_up"></i>
                <i class="r_down zuo_up"></i>
                <div class="z_zuangtai" @click="dianji" ref="button">
                  打开修改报警阈值
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d main0">
          <!-- 修改参数设置 -->
          <div class="envent_d" id="zbf_edit_cur" v-show="hide" @dblclick="openEditPanel">
            <p>
              <span>温度过低阈值</span>
              <span key-str="tsl" label="温度过低阈值">{{ canshuData.tsl }}</span>
            </p>
            <p>
              <span>温度过高阈值</span>
              <span key-str="tsh" label="温度过高阈值">{{ canshuData.tsh }}</span>
            </p>
            <p>
              <span>温度偏低阈值</span>
              <span key-str="tl" label="温度偏低阈值">{{ canshuData.tl }}</span>
            </p>
            <p>
              <span>温度偏高阈值</span>
              <span key-str="th" label="温度偏高阈值">{{ canshuData.th }}</span>
            </p>

            <p>
              <span>着火距离过短阈值</span>
              <span key-str="dss" label="着火距离过短阈值">{{ canshuData.dss }}</span>
            </p>
            <p>
              <span>着火距离过长阈值</span>
              <span key-str="dsl" label="着火距离过长阈值">{{ canshuData.dsl }}</span>
            </p>
            <p>
              <span>着火距离偏短阈值</span>
              <span key-str="ds" label="着火距离偏短阈值">{{ canshuData.ds }}</span>
            </p>
            <p>
              <span>着火距离偏长阈值</span>
              <span key-str="dl" label="着火距离偏长阈值">{{ canshuData.dl }}</span>
            </p>
            <p>
              <span>燃烧稳定性过低阈值</span>
              <span key-str="ssu" label="燃烧稳定性过低阈值">{{ canshuData.ssu }}</span>
            </p>
            <p>
              <span>燃烧稳定性偏低阈值</span>
              <span key-str="su" label="燃烧稳定性偏低阈值">{{ canshuData.su }}</span>
            </p>
          </div>
          <div id="edit_pointer_panel">
            <span class="label">{{ currentEditPointerLabel }}</span>
            <div>
              <input ref="inputEl" type="text" v-model="currentEditPointerValue" @keydown.esc="closeEditPanel"   @keydown.enter="savePointerData" />
              <button type="button" @click="closeEditPanel">取 消</button>
              <button type="button" @click="savePointerData">保 存</button>
            </div>
          </div>
          <!-- 修改参数设置 -->
          <div class="envent_u   sapm"   >
            <span>监测项</span>
            <span  >A1</span><span>A2</span><span>A3</span><span>A4</span>
            <span>B1</span><span>B2</span><span>B3</span><span>B4</span>
            <span>C1</span><span>C2</span><span>C3</span><span>C4</span>
            <span>D1</span><span>D2</span><span>D3</span><span>D4</span>
          </div>
          <div class="envent_d" id="index_rsszhjk">
            <div class="envent_u">
              <span  style="color:black ;">温度(°C)</span>
              <span v-for="(item, index) in wendu" :key="index">
                <div style="color: green;" v-if="textColorWenDu[index] === '0'">{{ item }}</div>
                <div style="color: yellow;" v-if="textColorWenDu[index] === '1'">{{ item }}</div>
                <div style="color: red;" v-if="textColorWenDu[index] === '2'">{{ item }}</div>
              </span>
            </div>
            <div class="envent_u">
              <span style="color:black ;">着火距离(mm)</span>
              <span v-for="(item, index) in zhaohu" :key="index">
                <div style="color: green;" v-if="textColorZHaoHuo[index] === '0'">{{ item }}</div>
                <div style="color: yellow;" v-if="textColorZHaoHuo[index] === '1'">{{ item }}</div>
                <div style="color: red;" v-if="textColorZHaoHuo[index] === '2'">{{ item }}</div>
              </span>
            </div>
            <div class="envent_u">
              <span style="color:black ;">燃烧稳定性(%)</span>
              <span v-for="(item, index) in ranshao" :key="index">
                <div style="color: green;" v-if="textColorRanShao[index] === '0'">{{ item }}</div>
                <div style="color: yellow;" v-if="textColorRanShao[index] === '1'">{{ item }}</div>
                <div style="color: red;" v-if="textColorRanShao[index] === '2'">{{ item }}</div>
              </span>
            </div>
          </div> 
        </div>
      </div>
    </div>
  </div>

  <!-- 时间 -->
  <div class="mainDiv shouye">
    <div class="l">
      <div class="stage_c_r main_2">
        <div class="t">
          <div class="react">
            <i class="l_up"></i>
            <i class="l_down"></i>
            <i class="r_up"></i>
            <i class="r_down"></i>
            <div class="title">
              <div class="title_r"><span>燃烧数字化监测</span></div>
              <div class="title_zuo">
                <i class="l_up zuo_up"></i>
                <i class="l_down zuo_up"></i>
                <i class="r_up zuo_up"></i>
                <i class="r_down zuo_up"></i>
                <div class="z_zuangtai" >
                  整体运行状态：{{yunxingzhuangtai}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d" id="envent_d">
          <div class="envent_u">
            <!--<span>时间</span><span>状态</span><span>描述</span>-->
            <span style="color:black ; font-size: 25px;">时间</span><span style="color:black ; font-size: 25px;">描述</span>
          </div>
          <div class="envent_d" id="indexEventList">
            <p v-for="item in eventList" style="font-size: 15px">
              <span style="font-size: 30px;color: green ;">{{ item.t }}</span><span  style="font-size: 30px;color: green;">  {{ item.event }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 标题 -->
  <div class="stage_t">
    <a href="#"></a>
    <h1>1号锅炉燃烧数字化与低负荷稳燃监测管理系统</h1>
    <div>
      <span></span>
      <span id="todayTimer">{{ nowTime }}</span>
    </div>
  </div>

</div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
const nowTime = ref("");
import { formatTime } from "../utils/date";
import { postshouyewenduapi } from "../api/index.js";
import { parameter, setParameter, getSDZlist, history, history0, searchSdz } from "../api/canshushezhi.js";
onMounted(() => {
  setInterval(() => {
    nowTime.value = formatTime(new Date());
  });
  obj()
  objlist()
});



// 接口主界面逻辑的部分
// 机组实发功率
let dcsMainjizu = ref({});
// 事件列表
let eventList = ref({});
// 燃烧数字化检测
let dcsBurning = ref({});
// 温度
let wendu = ref([]);

// 着火距离
let zhaohu = ref([]);
// 燃烧稳定性检测
let ranshao = ref([]);
// 根据接口返回来的字段判断他的颜色----
let myElement = ref([]);
// 接口返回温度字体颜色字段
let textColorWenDu = ref([])
// 接口返回着火距离字体颜色字段
let textColorZHaoHuo = ref([])
// 接口返回燃烧稳定性字体颜色字段
let textColorRanShao = ref([])
/// 整体运行状态
let yunxingzhuangtai=ref({})
let timer = 0
let objlist = async () => {
  clearTimeout(timer)
  let res = await postshouyewenduapi();
  dcsMainjizu.value = res.data.dcsMain;
  eventList.value = res.data.events;
  dcsBurning.value = res.data.monitors;
  yunxingzhuangtai.value=res.data.situation
  console.log(dcsBurning.value);
  //   数据填写----
  dcsBurning.value.map((item, index) => {
    wendu.value[index] = item.temperature.toFixed(0);
    zhaohu.value[index] = item.distance.toFixed(0);
    ranshao.value[index] = item.stability.toFixed(0);
    // 颜色判断字段
    myElement.value[index] = item.warning.split(',');
  });
   
  //颜色的判断
  myElement.value.map((item, index) => {
    textColorWenDu.value[index] = item[0]
    textColorZHaoHuo.value[index] = item[1]
    textColorRanShao.value[index] = item[2]
  });

  timer = setTimeout(() => {
    objlist();
  }, 500);
};



// 修改参数的数据
// 点击实现显示和隐藏
let hide = ref(false)
let button = ref("")
let dianji = () => {
  hide.value = !hide.value
  if (hide.value === false) {
    button.value.innerText = "打开修改报警阈值"
  } else {
    button.value.innerText = "关闭修改报警阈值"
  }
}

// 、、、、、、、、、、、、、、、、、、、、、、、、、、
let currentEditPointerLabel = ref(""); // 当前编辑字段的label
let currentEditPointerKey = ref(""); // 当前编辑字段的key
let currentEditPointerValue = ref(0); // 当前编辑字段的value
const inputEl = ref(null);

// 打开编辑面板且设置当前编辑的label和value
function openEditPanel(e) {
  let panelEl = document.getElementById("edit_pointer_panel");
  if (e.target.tagName !== "SPAN" || !e.target.getAttribute("key-str")) {
    return;
  }
  let spanEl = document.getElementsByClassName("editing")[0];
  if (spanEl) spanEl.classList.remove("editing");
  // 显示并移动编辑面板
  panelEl.style.display = "inline-block";
  panelEl.style.top = e.target.offsetTop + 64 + "px";
  panelEl.style.left = (e.target.offsetLeft + e.target.offsetWidth / 2) - 145 + "px";
  let key = e.target.getAttribute("key-str");
  let label = e.target.getAttribute("label");
  currentEditPointerLabel.value = label;
  currentEditPointerKey.value = key;
  currentEditPointerValue.value = canshuData[key];
  // 获得焦点
  inputEl.value.focus();
  // 全选文本
  setTimeout(() => inputEl.value.select(), 50);
  // 高亮显示当前的编辑的元素
  e.target.classList.add("editing");
}

// 关闭编辑面板
function closeEditPanel() {
  let panelEl = document.getElementById("edit_pointer_panel");
  panelEl.style.display = "none";
  let spanEl = document.getElementsByClassName("editing")[0];
  spanEl.classList.remove("editing");
}

// 保存数据
const savePointerData = async () => {
  let arr = [
    {
      parameter: currentEditPointerKey.value,
      v: currentEditPointerValue.value,
    },
  ];
  let res = await setParameter(arr);
  if (res.status === 200) {
    canshuData[currentEditPointerKey.value] = currentEditPointerValue.value;
    let spanEl = document.getElementsByClassName("editing")[0];
    if (spanEl) spanEl.innerText = currentEditPointerValue.value;
  }
  closeEditPanel();
};
// 后台返回的全部参数数据
const canshuData = reactive({});
// 获取数据
let obj = async () => {
  let res = await parameter();
  if (res.status === 200) {
    for (let key in res.data) {
      canshuData[key] = res.data[key];
    }
  }
};

</script>

<style scoped lang="scss">
.sapm span{
   color: #000;
}

.title {
  display: flex;
  justify-content: space-between;
}

.title_r span {
  font-size: 30px;
}

.title_zuo {
  position: relative;
}

.zuo_up {
  filter: hue-rotate(170deg);
}

.z_zuangtai {
  height: 100%;
  border: 1px solid #000;
  background-color: #60b637;
  padding: 2px 10px;
  margin: 15px;
  font-size: 20px;
}

.z_you {
  color: #e22619;
  display: inline;
}

.stage_c_r.main_2 {
  width: 100%;
}



.title {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .title_zuo {
    display: flex;
    justify-content: space-around;
  }
}



.chouti,
.choutileft_main {
  height: 100%;
}

.choutileft_main {
  height: 100%;
  overflow: auto;
}

.react .title.lishi>span {
  display: inline-block;
  font-size: 36px;
  /* color: #98e4f3; */
  padding-left: 34px;
  background: url(./assets/zjz.png) center left no-repeat;
  background-size: 22px;
}

.react .title.lishi {
  box-sizing: border-box;
  color: #fff;
  font-size: 28px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* width: 100%; */
  height: 100%;
  padding: 10px 20px;
  margin: 10px;
  /* background: rgb(0 188 255 / 10%); */
}

#zbf_edit_cur span {
  color: #00d4ff;
}

#zbf_edit_cur1:deep(span) {
  line-height: 60px;
  user-select: none;
}

#zbf_edit_cur1:deep(.editing) {
  border-color: yellowgreen;
}

input:focus {
  outline: none;
}

.cssz .zssz_c .csszenvent_d:deep(span:first-child),
.csszenvent_d:deep(p span:first-child),
.envent_u1:deep(span:first-child) {
  min-width: 100px;
}

#edit_pointer_panel {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 250px;
  height: 80px;
  padding: 10px 20px;

  background-color: #000;
  opacity: 0.9;
  color: #fff;
  font-size: 20px;
}

#edit_pointer_panel .label {
  display: block;
  padding: 10px 0;
}

#edit_pointer_panel>div {
  display: flex;
  align-items: flex-end;
}

#edit_pointer_panel button {
  width: 50px;
  height: 30px;
  border-style: none;
  line-height: 30px;
  background-color: #fff;
  color: #000;
  font-weight: 700;
  margin-left: 20px;
}

#edit_pointer_panel input {
  width: 100px;
  height: 30px;
  font-size: 20px;
  line-height: 25px;
  border-style: none;
  padding: 0 5px;
}

.dataApoiutes {
  height: 20px;
}

.search-panel {
  color: #FFF;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.customized-panel {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.custom-panel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-panel .form-item {
  width: 140px;
  display: flex;
}

.search-panel .form-item>label {
  display: inline-block;
  text-align: end;
  width: 80px;
  font-size: 14px;
  line-height: 20px;
  background: none;
  line-height: 20px;
  margin-right: 10px;
}

.search-panel .form-item>input[type="number"] {
  width: 50px;
}

.search-panel .form-item>select {
  width: 50px;
  height: 20px;
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-panel .button-container button {
  width: 80px;
  padding: 0px 20px;
  background-color: #00d4ff;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  border-style: none;
  margin-left: 200px;
}

#history_echarts {
  width: 80vw;
  height: calc(100vh - 400px);
  margin: 10px auto;
}

.sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list) {
  width: 80vw;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
}

.sdz-select:deep(.el-select__popper ul.el-scrollbar__view.el-select-dropdown__list>li) {
  /* width: 200px; */
  flex: 20%;
  border-right: 1px solid #ccc;
}

.sdz-select:deep(.el-select-dropdown__wrap) {
  max-height: 50vh;
}

.sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected::after) {
  left: 20px;
  right: unset;
}

.sdz-select:deep(.el-select-dropdown.is-multiple .el-select-dropdown__item::before) {
  content: "";
  position: absolute;
  top: 50%;
  border: 1px solid #ccc;
  width: 14px;
  height: 14px;
  left: 18px;
  right: unset;
  border: 1px solid #606266;
  transform: translateY(-50%);
}

.sdz-select:deep(.el-select-dropdown__item) {
  padding-left: 40px;
}
</style>